<template>
  <div id='tmpl'>
    <div class="silder">
        <silder :imgs="list"></silder>
    </div>
    <div id="buy">
        <h3>{{info.title}}</h3>
        <p class="line"></p>
        <ul>
            <li class="price">
                市场价：<s>￥{{info.market_price}}</s> 销售价：<span>￥{{info.sell_price}}</span>
            </li>
            <li class="inputli">
                购买数量：<inputNumber class="inputNumber" @dataobj="getmessage"></inputNumber>
            </li>
            <li>
                <mt-button type="primary" size="small">立即购买</mt-button>
                <mt-button type="danger" size="small">加入购物车</mt-button>                
            </li>
        </ul>
    </div>
    <div id="params">
        <h6>商品参数</h6>
        <p class="line"></p>
        <ul>
            <li>商品情况：{{info.goods_no}}</li>
            <li>库存情况：{{info.stock_quantity}}</li>
            <li>上架时间：{{info.add_time | datafmt("YYYY-MM-DD HH:mm:ss")}}</li>
        </ul>
    </div>
    <div id="other">
        <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
            <mt-button type="primary" size="large" class="imgdesc">图文介绍</mt-button>
        </router-link>
        <router-link v-bind="{to:'/goods/goodsdesccomment/'+id}">
        <mt-button type="danger" size="large">商品评论</mt-button> 
        </router-link>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
  import common from "../../kits/common.js";
  import silder from "../subcom/silder.vue";
  import inputNumber from "../subcom/inputNumber.vue";  
export default {
    components:{
        silder,inputNumber
    },
  data () {
    return {
        id:0,
        list:[],
        info: {},
        inputNumberCount:1
    };
  },
  created(){
      this.id=this.$route.params.id;
      this.getimgs();
      this.getinfo();
  },
  methods:{
      getinfo(){
          var url=common.apidomain+"/api/goods/getinfo/"+this.id
          this.$http.get(url).then(function(response){
              var body=response.body;
              if(body.status!=0){
                  Toast(body.message);
                  return;
              };
              this.info=body.message[0];
          })
      },
      getimgs(){
          var url=common.apidomain+"/api/getthumimages/"+this.id;
          this.$http.get(url).then(function(response){
              var body=response.body;
              if(body.status!=0){
                  Toast(body.message);
                  return;
              };
              this.list=body.message;
          })
      },
      getmessage(input){
          this.inputNumberCount=input;
      }
  }
}
</script>
<style lang="css" scoped>
.silder{
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 5px;
    margin: 5px;
}
#buy,#params{
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 5px;
}
#buy h3{
color:#0094ff;
padding: 4px;
}
 .line{
    height: 1px;
    border: 1px solid rgba(0,0,0,0.4);
}
#buy ul, #params ul{
    padding-left: 0px;
}
#buy li,#params li{
    list-style: none;
    padding: 8px;
}
#buy .price span{
    color:red;
}
.imgdesc{
    margin-bottom: 20px;
}
#buy .inputli{
    position: relative;
}
#buy .inputNumber{
    position: absolute;
    left: 100px;
    top: -40px;
}
</style>
